
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

@font-face {font-family: "Dimbo";
    src: url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.eot"); /* IE9*/
    src: url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.woff2") format("woff2"), /* chrome firefox */
    url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.woff") format("woff"), /* chrome firefox */
    url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("../fonts/49358e9992ea00fd2bfeea9aa85fbfb2.svg#Dimbo") format("svg"); /* iOS 4.1- */
}

@font-face {
    font-family: 'GraphicPixel';
    src: url('../fonts/graphicpixel-webfont.eot');
    src: url('../fonts/graphicpixel-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/graphicpixel-webfont.woff') format('woff'),
    url('../fonts/graphicpixel-webfont.ttf') format('truetype'),
    url('../fonts/graphicpixel-webfont.svg#GraphicPixelRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AdvoCut';
    src: url('../fonts/advocut-webfont.eot');
    src: url('../fonts/advocut-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/advocut-webfont.woff') format('woff'),
    url('../fonts/advocut-webfont.ttf') format('truetype'),
    url('../fonts/advocut-webfont.svg#AndinaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
#chatLog.chatscrollin {
   height: 50%;
   transition: max-height .5s ease-in-out;
   -moz-transition: max-height .5s ease-in-out;
   -webkit-transition: max-height .5s ease-in-out;
}


#chatLog.chatscrollout {
   height: 15%;
   transition: max-height .5s ease-in-out;
   -moz-transition: max-height .5s ease-in-out;
   -webkit-transition: max-height .5s ease-in-out;
}
*/

#menucontainer {
	border-radius: 10% / 5% !important;
}
#menucontainer:before {
	border-radius: 10% / 5% !important;
}
	
@media screen and (min-width: 1501px) {

    #chatbutton {
        position: absolute;
        left: 0;
        bottom:2%;
		opacity:0.6;
    }
   
    #chatLog{
    	font-family:'GraphicPixel';
		color:#e3e3e3;
		position:absolute;
        width: 988px;
        height:45%;
        left: 0;
        top: 45%;
        /*margin-top:-161px;*/
        /*border: 1px solid #9C9898;*/
        /*background-color: rgba(0, 0, 0, 0.10);*/
        padding: 10px; 
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 10;
        display: none;
        opacity:0.6;
        pointer-events: none;
   }
	
    #chatLog p{
        margin-bottom: 3px;
        padding: 0;
        line-height: 1;
        color: rgba(255,255,255,1);
        font-family:'GraphicPixel';
        font-size: 16px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    #chatLog p .name{
        font-weight: bold;
    }
    	
        #menucontainer {
        	position:absolute;
        	right:0;
			top:15%;
        	width:120px;
        	height:240px;
        	z-index:20;
        	cursor: pointer;
        	pointer-events: all;
			opacity:0.75;			
        }

	#menucontainer div {
		pointer-events: all;
	}
        

    #moreinventorybutton,
    #characterbutton,
    #skillbutton,
    #helpbutton,
    #settingsbutton,
    #warpbutton,
    #socialbutton,
    #leaderboardbutton,
    #storebutton
    {
    	position:absolute;

    	margin:6px;
        width: 30px;
        height: 30px;
		left:0;    	
    }
    
    #moreinventorybutton{
        bottom: 240px;
        background-color:#999;
        border-radius:50%;
    }
    
    #characterbutton {
        bottom: 210px;
        background-color:#999;
        border-radius:50%;
    }
    #skillbutton {
        bottom: 180px;
        background-color:#999;
        border-radius:50%;
    }    
    #helpbutton {
        bottom: 150px;
        background-color:#999;
        border-radius:50%;
    }
    #warpbutton {
        bottom: 120px;
        background-color:#999;
        border-radius:50%;
    }
    #socialbutton {
        bottom: 90px;
        background-color:#999;
        border-radius:50%;
    }
    #settingsbutton {
        bottom: 60px;
        background-color:#999;
        border-radius:50%;
    }    
    #leaderboardbutton {
        bottom: 30px;
        background-color:#999;
        border-radius:50%;
    }    
    #storebutton {
        bottom: 0px;
        background-color:#999;
        border-radius:50%;
    }

    #moreinventorytext,
    #charactertext,
    #skilltext,
    #helptext,
    #settingstext,
    #warptext,
    #socialtext,
    #leaderboardtext,
    #storetext
    {
    	position:absolute;
    	font-family:'GraphicPixel';
    	color:white;	
    	font-size:18px;
    	font-weight:bold;
    	margin:6px;
        width: 120px;
        height: 30px;
		left:48px;    	
    }

    #moreinventorytext{
        bottom: 240px;        
    }
    
    #charactertext {
        bottom: 210px;
    }
    #skilltext {
        bottom: 180px;
    }
    #helptext {
        bottom: 150px;
    }
    #warptext {
        bottom: 120px;
    }
    #socialtext {
        bottom: 90px;
    }
    #settingstext {
        bottom: 60px;
    }    
    #leaderboardtext {
        bottom: 30px;
    }    
    #storetext {
        bottom: 0px;
    }    

    #users {
        position: absolute;
        bottom: 2%;
        left:14%;
		opacity:0.6;
		z-index:5;
    }
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
    #chatbutton {
        position: absolute;
        left: 0;
        bottom:3%;
		opacity:0.6;
    }
   
    #chatLog{
    	font-family:'GraphicPixel';
		color:#e3e3e3;
		position:absolute;
        width: 459px;
        height:45%;
        left: 0;
        top: 45%;
        padding: 10px; 
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 10;
        display: none;
        opacity:0.6;
        pointer-events: none;
   }
	
    #chatLog p{
        margin-bottom: 2px;
        padding: 0;
        line-height: 1;
        color: rgba(255,255,255,1);
        font-family:'GraphicPixel';
        font-size: 12px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    #chatLog p .name{
        font-weight: bold;
    }
    	
        #menucontainer {
        	position:absolute;
        	right:0;
			top:15%;
        	width:80px;
        	height:160px;
        	z-index:20;
        	cursor: pointer;
        	pointer-events: all;
			opacity:0.75;			
        }

	#menucontainer div {
		pointer-events: all;
	}
        

    #moreinventorybutton,
    #characterbutton,
    #skillbutton,
    #helpbutton,
    #settingsbutton,
    #warpbutton,
    #socialbutton,
    #leaderboardbutton,
    #storebutton
    {
    	position:absolute;

    	margin:4px;
        width:20px;
        height:20px;
		left:0;    	
    }
    
    #moreinventorybutton{
        bottom:160px;
        background-color:#999;
        border-radius:50%;
    }
    
    #characterbutton {
        bottom: 140px;
        background-color:#999;
        border-radius:50%;
    }
    #skillbutton {
        bottom: 120px;
        background-color:#999;
        border-radius:50%;
    }    
    #helpbutton {
        bottom: 100px;
        background-color:#999;
        border-radius:50%;
    }
    #warpbutton {
        bottom: 80px;
        background-color:#999;
        border-radius:50%;
    }
    #socialbutton {
        bottom: 60px;
        background-color:#999;
        border-radius:50%;
    }
    #settingsbutton {
        bottom: 40px;
        background-color:#999;
        border-radius:50%;
    }    
    #leaderboardbutton {
        bottom: 20px;
        background-color:#999;
        border-radius:50%;
    }    
    #storebutton {
        bottom: 0px;
        background-color:#999;
        border-radius:50%;
    }

    #moreinventorytext,
    #charactertext,
    #skilltext,
    #helptext,
    #settingstext,
    #warptext,
    #socialtext,
    #leaderboardtext,
    #storetext
    {
    	position:absolute;
    	font-family:'GraphicPixel';
    	color:white;	
    	font-size:12px;
    	font-weight:bold;
    	margin:4px;
        width: 80px;
        height: 20px;
		left:32px;    	
    }

    #moreinventorytext{
        bottom: 160px;
    }
    
    #charactertext {
        bottom: 140px;
    }
    #skilltext {
        bottom: 120px;
    }
    #helptext {
        bottom: 100px;
    }
    #warptext {
        bottom: 80px;
    }
    #socialtext {
        bottom: 60px;
    }
    #settingstext {
        bottom: 40px;
    }    
    #leaderboardtext {
        bottom: 20px;
    }    
    #storetext {
        bottom: 0px;
    }    

    #users {
        position: absolute;
        bottom: 3%;
        left:14%;
		opacity:0.6;
		z-index:6;
    }
}

@media screen and (max-width: 1000px) {
    #chatbutton {
        position: absolute;
        left: 0;
        bottom:2%;
		opacity:0.6;
		z-index:6;
    }
   
    #chatLog{
    	font-family:'GraphicPixel';
		color:#e3e3e3;
		position:absolute;
        width: 230px;
        height:45%;
        left: 0;
        top: 45%;
        padding: 5px; 
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 10;
        display: none;
        opacity:0.6;
        pointer-events: none;
   }
	
    #chatLog p{
        margin-bottom: 1px;
        padding: 0;
        line-height: 1;
        color: rgba(255,255,255,1);
        font-family:'GraphicPixel';
        font-size: 6px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
    #chatLog p .name{
        font-weight: bold;
    }
    	
        #menucontainer {
        	position:absolute;
        	right:0;
			top:15%;
        	width:40px;
        	height:80px;
        	z-index:20;
        	cursor: pointer;
        	pointer-events: all;
			opacity:0.75;			
        }

	#menucontainer div {
		pointer-events: all;
	}
        

    #moreinventorybutton,
    #characterbutton,
    #skillbutton,
    #helpbutton,
    #settingsbutton,
    #warpbutton,
    #socialbutton,
    #leaderboardbutton,
    #storebutton
    {
    	position:absolute;

    	margin:2px;
        width:10px;
        height:10px;
		left:0;    	
    }
    
    #moreinventorybutton{
        bottom:80px;
        background-color:#999;
        border-radius:50%;
    }
    
    #characterbutton {
        bottom: 70px;
        background-color:#999;
        border-radius:50%;
    }
    #skillbutton {
        bottom: 60px;
        background-color:#999;
        border-radius:50%;
    }    
    #helpbutton {
        bottom: 50px;
        background-color:#999;
        border-radius:50%;
    }
    #warpbutton {
        bottom: 40px;
        background-color:#999;
        border-radius:50%;
    }
    #socialbutton {
        bottom: 30px;
        background-color:#999;
        border-radius:50%;
    }
    #settingsbutton {
        bottom: 20px;
        background-color:#999;
        border-radius:50%;
    }    
    #leaderboardbutton {
        bottom: 10px;
        background-color:#999;
        border-radius:50%;
    }    
    #storebutton {
        bottom: 0px;
        background-color:#999;
        border-radius:50%;
    }

    #moreinventorytext,
    #charactertext,
    #skilltext,
    #helptext,
    #settingstext,
    #warptext,
    #socialtext,
    #leaderboardtext,
    #storetext
    {
    	position:absolute;
    	font-family:'GraphicPixel';
    	color:white;	
    	font-size:6px;
    	font-weight:bold;
    	margin:2px;
        width: 40px;
        height: 10px;
		left:16px;    	
    }

    #moreinventorytext{
        bottom: 80px;
    }
    
    #charactertext {
        bottom: 70px;
    }
    #skilltext {
        bottom: 60px;
    }
    #helptext {
        bottom: 50px;
    }
    #warptext {
        bottom: 40px;
    }
    #socialtext {
        bottom: 30px;
    }
    #settingstext {
        bottom: 20px;
    }    
    #leaderboardtext {
        bottom: 10px;
    }    
    #storetext {
        bottom: 0px;
    }    

    #users {
        position: absolute;
        bottom: 2%;
        left:14%;
		opacity:0.6;
		z-index:6;
    }
}
